$(function() {
    var $a1 = $("#a1");
    var $a2 = $("#a2");
    var $a3 = $("#a3");
    var $a4 = $("#a4");
    var $a5 = $("#a5");
    var $level01 = $("#ul1"); 
    var $level02 = $("#ul2");
    var $level03 = $("#ul3");
    var $level04 = $("#ul4");
    var $level05 = $("#ul5");
    $.getJSON("lib/menu.json", function(json) {
        console.log(json.menu);
        var myMenu = json.menu;
        var myOne = myMenu.one;

//
        var myTwo = myMenu.two;
        var myThree = myMenu.three;
        var myFour = myMenu.four;
        var myFive = myMenu.five;
        
        $.each(myOne,function(j){
            $("<li>" + myOne[j] + "</li>").appendTo("#ul1");
        });

//
        $.each(myTwo,function(j){
            $("<li>" + myTwo[j] + "</li>").appendTo("#ul2");
        })


        $.each(myThree,function(j){
            $("<li>" + myThree[j] + "</li>").appendTo("#ul3");
        })
        $.each(myFour,function(j){
            $("<li>" + myFour[j] + "</li>").appendTo("#ul4");
        })
        $.each(myFive,function(j){
            $("<li>" + myFive[j] + "</li>").appendTo("#ul5");
        })

       $level01.mouseover(function() {
            $(this).css("display", "block");
        });
        $a1.mouseover(function() {
            $(this).css("color", "red");
            $(this).css("border-bottom", "red");
        });
        $a1.mouseout(function() {
            $(this).css("color", "white");
        });
  //
         $level02.mouseover(function() {
         $(this).css("display", "block");
        });
          $a2.mouseover(function() {
          $(this).css("color", "red");
        });
          $a2.mouseout(function() {
          $(this).css("color", "white");
        });
          $level03.mouseover(function() {
          $(this).css("display", "block");
        });
          $a3.mouseover(function() {
          $(this).css("color", "red");
        });
          $a3.mouseout(function() {
          $(this).css("color", "white");
        });
          $level04.mouseover(function() {
          $(this).css("display", "block");
        });
          $a4.mouseover(function() {
          $(this).css("color", "red");
        });
          $a4.mouseout(function() {
          $(this).css("color", "white");
        });
          $level05.mouseover(function() {
          $(this).css("display", "block");
        }); 
          $a5.mouseover(function() {
          $(this).css("color", "red");
        });
          $a5.mouseout(function() {
          $(this).css("color", "white");
        });

        var onOff = false;
        $a1.click(function(){
            if(onOff){
                $level01.css("display", "block");
            }else{
                $level01.css("display", "none");
            }
            onOff = !onOff;
        })
        $a1.hover(function(){
            $level01.css("display", "block");

        },function(){
            if(onOff){
                $level01.css("display", "block");
            }else{
                $level01.css("display", "none");
            }
        })
        var onOff = false;
        $a2.click(function(){
            if(onOff){
                $level02.css("display", "block");
            }else{
                $level02.css("display", "none");
            }
            onOff = !onOff;
        })
        $a2.hover(function(){
            $level02.css("display", "block");
        },function(){
            if(onOff){
                $level02.css("display", "block");
            }else{
                $level02.css("display", "none");
            }
        })

        var onOff = false;
        $a3.click(function(){
            if(onOff){
                $level03.css("display", "block");
            }else{
                $level03.css("display", "none");
            }
            onOff = !onOff;
        })
        $a3.hover(function(){
            $level03.css("display", "block");
        },function(){
            if(onOff){
                $level03.css("display", "block");
            }else{
                $level03.css("display", "none");
            }
        })

        var onOff = false;
        $a4.click(function(){
            if(onOff){
                $level04.css("display", "block");
            }else{
                $level04.css("display", "none");
            }
            onOff = !onOff;
        })
        $a4.hover(function(){
            $level04.css("display", "block");
        },function(){
            if(onOff){
                $level04.css("display", "block");
            }else{
                $level04.css("display", "none");
            }
        })


        var onOff = false;
        $a5.click(function(){
            if(onOff){
                $level05.css("display", "block");
            }else{
                $level05.css("display", "none");
            }
            onOff = !onOff;
        })
        $a5.hover(function(){
            $level05.css("display", "block");
        },function(){
            if(onOff){
                $level05.css("display", "block");
            }else{
                $level05.css("display", "none");
            }
        })

    });

});







    

